<template>
  <div style="height: 100%; width: 100%">
    <OptionTitle
      :title="translate('hotCoach')"
      :sub-title="`${translate('maxAdd')}${config.maxNum}${translate('gjl')}`"
    />
    <el-form label-width="auto" class="mt20">
      <el-form-item :label="translate('showMethods')" class="mb5">
        <el-radio
          v-for="item in styleList"
          :key="item.key"
          v-model="content.style"
          :label="item.key"
          @change="dragSuccess"
        >{{ item.value }}</el-radio>
      </el-form-item>
      <el-form-item :label="translate('showContent')" class="mb5">
        <el-checkbox-group v-model="showContent" @change="dragSuccess">
          <el-checkbox
            v-for="item in paramList"
            :key="item.key"
            :label="item.key"
          >{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="translate('showRules')" class="mb5">
        <el-radio
          v-for="item in ruleList"
          :key="item.key"
          v-model="venueContent.rule"
          :label="item.key"
          @change="ruleClick(item.key)"
        >{{ item.value }}</el-radio>
      </el-form-item>
    </el-form>
    <div v-if="venueContent.rule === '2'" class="side">
      <el-button icon="el-icon-plus" @click="openDrawer">{{
        translate("tjjl")
      }}</el-button>
      <Draggable
        v-model="venueContent.customList"
        class="list"
        @end="dragSuccess"
      >
        <div
          v-for="(item, index) in venueContent.customList"
          :key="item.id"
          class="item"
        >
          <img class="img" :src="item.icon" alt="">
          <div class="title">{{ item.title }}</div>
          <img class="drag" src="@/assets/icon/drag.png" alt="">
          <div class="del_wrap" @click="customItemDel(index)">
            <i color="#FDEBE8" class="el-icon-delete" />
          </div>
        </div>
      </Draggable>
    </div>

    <el-drawer
      :title="translate('tjjl')"
      :visible.sync="isShowDrawer"
      size="800px"
    >
      <div class="drawer_wrap">
        <div>
          <span>{{ translate("jlxm") }}：</span>
          <el-input
            v-model="searchSlideTitle"
            class="w200 mr20"
            :placeholder="translate('qsrjjxm')"
          />
          <span>{{ translate("level") }}：</span>
          <el-select
            v-model="levelId"
            class="w200 mr20"
            :placeholder="translate('levelPlace')"
            clearable
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :value="item.id"
              :label="item.levelName"
            />
          </el-select>
          <el-button type="primary" @click="queryDrawerList">{{
            translate("cz")
          }}</el-button>
          <el-button @click="clearDrawer">{{ translate("clear") }}</el-button>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableList"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table mt20"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column
            align="center"
            :label="translate('jlxm')"
            prop="teacherName"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="translate('phone')"
            prop="phone"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="translate('level')"
            prop="levelName"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="translate('avatar')"
            prop=""
            min-width="100"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <img
                style="width: 40px; height: 40px"
                :src="scope.row.teacherImage"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="translate('sex')"
            prop="price"
            min-width="80"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <span v-if="scope.row.sex == '1'">{{ translate("nan") }}</span>
              <span v-else-if="scope.row.sex == '2'">{{
                translate("nv")
              }}</span>
              <span v-else>{{ translate("bm") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="translate('ljks')"
            prop="classNum"
            min-width="80"
            show-overflow-tooltip
          />
        </el-table>
        <Paginations
          :total="tableListTotal"
          :page="pagination.page"
          @current-change="currentChange"
          @SizeChange="handleSizeChange"
        />
        <div class="drawer_bottom">
          <div class="separate" />
          <el-button
            v-preventReClick
            type="primary"
            class="ml20"
            @click="customSub"
          >{{ translate("tj") }}</el-button>
          <el-button @click="isShowDrawer = false">{{
            translate("cancel")
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import OptionTitle from '../../../components/optionTitle.vue'
import { getTeacherAllList, getTeacherLevelList } from '@/api'
export default {
  components: {
    OptionTitle,
    Draggable
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramList: [],
      ruleList: [],
      styleList: [],
      content: {},
      venueContent: {},

      showContent: [], // 显示内容 暂存

      isShowDrawer: false,
      searchSlideTitle: '',
      levelId: '',
      tableList: [],
      tableListTotal: 0,
      selTableList: [],
      pagination: {
        page: 1,
        rows: 10
      },
      teacherList: [],
      listLoading: false,
      contentTemp: {},
      venueContentTemp: {},
      showContentTemp: []
    }
  },
  created() {
    this.paramList = [...this.config.paramList]
    this.ruleList = [...this.config.ruleList]
    this.styleList = [...this.config.styleList]
    this.content = { ...this.config.content }
    this.venueContent = { ...this.config.venueContent }
    if (this.content.param) {
      this.showContent = this.content.param.split(',')
    }
    this.contentTemp = JSON.parse(JSON.stringify(this.config.content))
    this.venueContentTemp = JSON.parse(JSON.stringify(this.config.venueContent))
    if (this.content.param) {
      this.showContentTemp = JSON.parse(JSON.stringify(this.content.param.split(',')))
    }
  },
  methods: {
    dragSuccess() {
      const { content, contentTemp, showContent, showContentTemp, venueContent, venueContentTemp } = this
      this.content.param = this.showContent.join(',')
      const obj = {
        venueContent: {
          customList: this.venueContent.customList
        },
        name: this.config.name,
        content: this.content
      }
      let count = 0
      if (showContent.join(',') !== showContentTemp.join(',')) {
        count++
      }
      if (content.style !== contentTemp.style) {
        count++
      }
      if (venueContent.rule !== venueContentTemp.rule) {
        count++
      }
      if (venueContent.customList && venueContentTemp.customList && venueContent.customList.map(i => i.id).join(',') !== venueContentTemp.customList.map(i => i.id).join(',')) {
        count++
      }
      this.$store.dispatch('app/changeMiniFlag', {
        code: 'teacherFlag',
        flag: count > 0
      })
      this.$bus.$emit('miniTeacherChange', this.venueContent.rule, obj)
    },
    handleSelectionChange(val) {
      this.selTableList = val
    },
    indexSub() {
      const fn = () => {
        if (this.venueContent.rule === '1') {
          this.venueContent.customList = null
        }
      }
      fn()
    },
    ruleClick(val) {
      this.dragSuccess()
    },
    openDrawer() {
      this.searchSlideTitle = ''
      this.isShowDrawer = true
      this.pagination.page = 1
      this.getHotCourse()
      this.$nextTick(() => {
        this.$refs.table.clearSelection()
      })
    },
    getHotCourse() {
      this.listLoading = true
      getTeacherAllList({
        param: {
          venueId: this.config.venueId,
          name: this.searchSlideTitle,
          levelId: this.levelId,
          status: '1'
        },
        pagination: this.pagination
      }).then(res => {
        this.listLoading = false
        this.tableList = res.recordList
        this.tableListTotal = res.totalCount
      }, () => {
        this.listLoading = false
      })
      getTeacherLevelList({
        param: {
          venueId: this.config.venueId
        }
      }).then(res => {
        this.teacherList = res.recordList || []
      })
    },
    customSub() {
      const temp = [...this.venueContent.customList || []]
      const customList = this.selTableList.map(item => {
        item.icon = item.teacherImage
        item.title = item.teacherName || ''
        item.id = item.teacherId || ''
        return item
      })
      customList.forEach(item => {
        if (temp.findIndex(i => i.id === item.id) > -1) {
          return
        } else {
          temp.push(item)
        }
      })
      if (temp.length > this.config.maxNum) {
        return this.$message.warning(`${this.translate('maxAdd')}${this.config.maxNum}${this.translate('gjl')}`)
      }
      this.venueContent.customList = temp
      this.dragSuccess()
      this.isShowDrawer = false
    },
    customItemDel(index) {
      const temp = [...this.venueContent.customList]
      temp.splice(index, 1)
      this.venueContent.customList = temp
      this.dragSuccess()
    },
    clearDrawer() {
      this.searchSlideTitle = ''
      this.levelId = ''
      this.pagination.page = 1
      this.getHotCourse()
    },
    queryDrawerList() {
      this.pagination.page = 1
      this.getHotCourse()
    },
    currentChange(val) {
      this.pagination.page = val
      this.getHotCourse()
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getHotCourse()
    }
  }
}
</script>

<style lang="scss" scoped>
.side {
  height: calc(100% - 200px);
  overflow: auto;
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item {
      margin-right: 20px;
      margin-bottom: 20px;
      width: 116px;
      height: 138px;
      position: relative;
      border: 1px solid #dfe2e8;
      padding: 10px;
      cursor: pointer;
      .img {
        width: 96px;
        height: 96px;
      }
      .title {
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      &:hover {
        .del_wrap {
          display: block;
        }
      }
      .del_wrap {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 0 0 0 4px;
        text-align: center;
        background-color: #fdebe8;
        color: #ee3821;
        font-size: 12px;
        cursor: pointer;
      }
      .drag {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
.drawer_wrap {
  height: calc(100% - 100px);
  overflow: auto;
}
.drawer_bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  padding-bottom: 20px;
  background-color: #fff;
  z-index: 1000;
  .separate {
    width: 100%;
    height: 1px;
    margin: 20px 0px;
    background-color: #dfe2e8;
  }
}
</style>
